<template>
  <el-container id="home">
    <el-aside width="120px">
      <img class="cloud-logo" @click="gotoHome" src="../assets/icon/logo.png" alt="businessDL">
      <el-menu
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        :unique-opened="true"
        :router="true"
        @select="asideHandleselect"
        @close="handleClose"
      >
        <el-menu-item
          v-for="(item, index1) in sideList"
          :key="index1"
          :index="item.path"
          v-bind:class="item.name == $route.name ? classObject : ''"
        >
          <div class="active-bar" style="width: 110px;display: flex;flex-direction: column;align-items: center">
              <img :src="item.name == $route.name ?item.focussrc : item.blursrc" alt="" v-if="index1!=0" width="30" height="28">
              <img :src="($route.name=='文件详情'||$route.name==false) ?item.focussrc : item.blursrc" alt="" v-if="index1==0" width="30" height="28">
            <span slot="title">{{item.name}}</span>
          </div>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container class="container">
      <el-header height="80px">
        <span class="header-title" @click="gotoHome">中达企业数据链</span>
        <el-dropdown class="todownlogo1">
          <div style="height:80px;width:100%">
            <i class="el-icon-arrow-down el-icon--right todownlogo"></i>
            <span class="user-name">{{userName}}</span>
            <div class="user-image">
              <img
                v-if="imgUrl == 'null' || imgUrl == ''"
                src="../assets/img/f1f277d0-93a0-11e8-a0aa-8fe5271aad26.png"
                alt
              >
              <img v-else :src="imgUrl" alt>
            </div>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-s-custom" @click.native="ownerCenter">个人中心</el-dropdown-item>
            <el-dropdown-item class="go-out" @click.native="logout">
              <i class="fa fa-sign-out" aria-hidden="true"></i>退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-input
          :placeholder="placeHolder"
          :disabled="canSearch"
          class="input-search"
          @keyup.enter.native="getSearch"
          v-model="inputsearch"
          clearable
        >
          <i slot="prefix" class="el-input__icon el-icon-search" @click="search"></i>
        </el-input>
      </el-header>
      <el-main>
        <router-view v-if="isRouterAlive"></router-view>
      </el-main>
    </el-container>
    <PersonCenter
      :dialogFormVisible="dialogFormVisible"
      @changeDialogFormVisible="changeDialogFormVisible"
      @changeheadimg="changeheadimg"
      @dialogClosed="dialogFormVisible = false"
      @changeImage="changeImage"
      @changeuserName="changeuserName"
      :ruleForm="ruleForm"
      :list="list"
      :imageUrl="imageUrl"
    ></PersonCenter>
  </el-container>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import PersonCenter from "../components/PersonCenter";
export default {
  components: { PersonCenter },
  provide() {
    return {
      reloadHome: this.reloadHome
    };
  },
  data() {
    return {
      classObject: {
        activebox: true
      },
      isRouterAlive: true,
      isRouterAliveMenu: true,
      sideList: [],
      inputsearch: "",
      imgUrl: "",
      userName: localStorage.getItem('realName'), //用户名
      dialogFormVisible: false, // 控制个人中心dialog显示
      list: {},
      ruleForm: {
        name: "",
        sex: 0,
        age: "",
        email: "",
        phone: ""
      },
      href:"",
      currentAccount: JSON.parse(localStorage.getItem("userInfo")).userEmail,
      imageUrl: "",
      headers: { authToken: localStorage.getItem("authToken") },
      uploadURL: this.$BaseUrl + "/user/updateHeadImg",
      percenCenterTitle: "修改信息",
    };
  },
  computed: {
    ...mapState(["searchInput", "placeHolder","canSearch"])
  },
  created() {
    this.$store.commit('setLoadingList',[]);
    this.$store.commit('setOutLoadingList',[])
    this.$store.commit('setZlkLoadingList',[])
    this.$store.commit('setGroupLoadingList',[])
    this.$store.commit('setLianLoadingList',[])
    this.$store.commit('setUploadLoading',false);
    this.$store.commit('setUploadPercent',0);
    this.$store.commit('setUploadPercent',[]);
    let isAdmin = localStorage.getItem("isAdministrators");
    this.imgUrl = localStorage.getItem("loginImg") || "null";
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    if (localStorage.getItem("isAdministrators") == 1) {
      this.usersVisible = true;
    }
    // console.log("this.$router", this.$router);
    if (this.$route.path === "/")
      this.$router.push({ path: "/FolderPage/FileDetails" });
    let _this = this;
    console.log(this.$router.options.routes);
    !(function(routes) {
      routes.map(v => {
        if (v.name == "Home") {
          v.children.forEach(item => {
            if (item.path === "/FolderPage") {
              item.path = "/FolderPage/FileDetails";
            }
          });
          _this.sideList = Object.assign({}, v.children);
        }
      });
    })(this.$router.options.routes);
    console.log(this.sideList)
    // this.listData = this.sideList;
    sessionStorage.setItem("sideList",JSON.stringify(this.sideList));
    if(isAdmin != 1){
      delete this.sideList[2];
      delete this.sideList[3];
      delete this.sideList[4];
    }
  },
  mounted() {
    this.asideHandleselect();
    this.href = window.location.href.split("/index.html")[0];
    var beginTime = 0;//执行onbeforeunload的开始时间
    var differTime = 0;//时间差
    window.onunload = function (){
      differTime = new Date().getTime() - beginTime;
      if(differTime <= 5) {
        console.log("浏览器关闭")
        var storage = window.localStorage;
        storage.clear()
      }else{
        console.log("浏览器刷新")
      }
    }
    window.onbeforeunload = function (){
      beginTime = new Date().getTime();
    };
     this.createPreviewBox();
  },
  watch: {
    inputsearch: {
      handler: function(newVal, oldVal) {
        if (newVal == "") {
          this.setSearchInput("");
        }
      }
    },
    searchInput: {
      handler: function(newVal, oldVal) {
        console.log("searchInput new data ", newVal);
        if (newVal == "") {
          this.inputsearch = "";
        } else {
          let currentClick = sessionStorage.getItem("currClick");
          if (currentClick == 2) {
            this.$message("当前仅支持我的文档和同事分享的搜索");
          }
        }
      }
    }
  },
  methods: {
    ...mapMutations(["setSearchInput"]),
    gotoHome(){
      console.log(this.href);
      window.location.href=this.href;
    },
    changeuserName(data){
      this.userName = data;
    },
    changeImage(data){
      this.imgUrl = data;
    },
    // 退出登录
    logout() {
      let _this = this;
      this.$confirm("确认退出吗?", "提示", {
        // type: 'warning'
      })
        .then(() => {
          document.cookie = "businessDataLinkUserInfo=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
          localStorage.removeItem("authToken");
          localStorage.removeItem("businessDataLinkUserInfo");
          _this.$router.push("/login");
        })
        .catch(() => {});
    },
    // 个人中心绑定的点击事件
    ownerCenter() {
      this.$http.get("/user/info").then(res => {
        if (res.status == 200) {
          console.log("userInfoaaaaaaaaa", res);
          res = res.data;
          this.ruleForm.name = res.realName;
          this.ruleForm.sex = res.sex;
          this.ruleForm.age = res.age;
          this.ruleForm.email = res.userEmail;
          this.ruleForm.phone = res.userPhone;
          this.list.company = res.companyName;
          this.list.apartment = res.departmentName;
          this.list.position = res.positionName;
          res.headImg != null
            ? (this.imageUrl = res.headImg)
            : (this.imageUrl =
                "/static/img/f1f277d0-93a0-11e8-a0aa-8fe5271aad26.9d13423.png");
          this.dialogFormVisible = true;
        }
      });
    },
    createPreviewBox(){
        const body = document.querySelector("body");
        let box=document.createElement('div');
        let myul=document.createElement('div');
        let iSpan=document.createElement('span');
        let mySpan=document.createElement('i');
        iSpan.style.color='white';
        mySpan.classList.add('fa','fa-times','fa-2x');
        mySpan.setAttribute('aria-hidden','true');
        iSpan.style.position='absolute';
        iSpan.style.top='20px';
        iSpan.style.right='20px';
        box.appendChild(myul);
        box.appendChild(iSpan);
        iSpan.appendChild(mySpan);
        box.style.display = "none";
        box.style.background='rgba(0, 0, 0, 0.4)';
        box.style.position='fixed';
        box.style.left='0px';
        box.style.top='0px';
        box.style.bottom='0px';
        box.style.right='0px';
        box.style.zIndex=10;
        box.classList.add("preview-box");
        myul.classList.add('preview-box__ul');
        myul.style.position='absolute';
        myul.style.left='50px';
        myul.style.top='50px';
        myul.style.bottom='50px';
        myul.style.right='50px';
        body.appendChild(box);
        console.log(body);
      },
    changeheadimg(newUrl) {
      if (newUrl == 1) {
        this.imgUrl = this.imageUrl;
        localStorage.setItem("loginImg", this.imgUrl);
      } else {
        this.imageUrl = newUrl;
      }
    },
    changeDialogFormVisible(bool) {
      this.imageUrl = this.imgUrl;
      return (this.dialogFormVisible = bool);
    },
    reloadHome() {
      this.isRouterAlive = false;
      this.$nextTick(function() {
        this.isRouterAlive = true;
      });
    },
    search() {},
    getSearch() {
      this.setSearchInput(this.inputsearch);
    },
    handleOpen(key, keyPath) {
      console.log("handleOpen keyPath", keyPath);
    },
    handleClose(key, keyPath) {
      console.log("handleClose", key, keyPath);
    },
    asideHandleselect(key, keyPath) {
      console.log("aaaaaaaaaa");
      this.setSearchInput("");
      // this.reloadHome()
      this.$http.get("/user/getAuthority").then(res=>{
        if(res.status == 200){
          console.log(res);
          this.sideList = JSON.parse(sessionStorage.getItem("sideList"));
          if(res.data.userStatus != 0){
            this.$message.error("当前账户不可用，请联系管理员")
            this.$router.push("/login");
          }
          if(res.data.isAdministrators != 1){
            delete this.sideList[2];
            delete this.sideList[3];
            delete this.sideList[4];
          }else{
            localStorage.setItem("isAdministrators",1)
          }
        }
      })
      console.log("asideHandleselect", key);
      console.log("asideHandleselect keyPath", keyPath);
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import "scss_vars";
.go-out {
  border-top: 1px solid rgba(238, 238, 238, 1);
}
#home {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  .el-aside {
    position: relative;
    background-color: $aside-bg;
    color: #333;
    text-align: center;
    line-height: 200px;
    padding-top: 80px;

    .cloud-logo {
      cursor: pointer;
      @include cl;
      top: 12px;
      color: white;
    }

    .fa {
      display: block;
      font-size: 28px;
    }

    .fa-users {
      font-size: 24px;
    }

    .fa-folder {
      font-size: 30px;
      margin-bottom: -5px;
    }

    .el-menu {
      border: none;
    }
    .el-menu-item:first-child {
      padding-top: 30px;
    }
    .el-menu-item {
      padding-left: 0 !important;
      padding-bottom: 49px;
      padding-right: 0;
      height: inherit;
      background: $aside-bg;
      color: #e9ecfa;
      line-height: 26px;
      i {
        color: #e9ecfa;
      }
    }
    .el-menu-item:hover{
        color: white;
    }

    .activebox {
      background: $aside-bg;
      .active-bar {
        cursor: pointer;
        border-left: 4px solid white;
      }
      i,
      span {
        color: white;
      }
    }

    .el-menu-item.is-active {
      background: $aside-bg;
      .active-bar {
        cursor: pointer;
        border-left: 4px solid white;
      }
      i,
      span {
        color: white;
      }
    }
  }

  .el-header {
    border-bottom: 1px solid $black-bg;
    .header-title {
        cursor: pointer;
      line-height: 80px;
      color: $aside-bg;
      font-size: 24px;
      font-weight: 500;
    }
    .user-image {
      float: right;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      right: 12px;
      img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        /*float: right;*/
      }
    }
    .user-name {
      float: right;
      display: inline-block;
      height: 20px;
      line-height: 20px;
      color: #666666;
      font-size: 14px;
      font-family: SourceHanSansCN-Regular;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      margin-top: 30px;
      padding-right: 12px;
      cursor: default;
      span {
        display: inline-block;
      }
    }
    .todownlogo1 {
      float: right;
      height: 80px;
    }
    .todownlogo {
      float: right;
      line-height: 20px;
      height: 20px;
      font-size: 14px;
      color: #999999;
      margin-top: 30px;
      margin-right: 20px;
    }

    .input-search {
      float: right;
      display: inline-block;
      width: 220px;
      line-height: 80px;
      position: relative;
      right: 50px;
      .el-input__inner {
        height: 36px;
      }
    }
    .userinfo-inner {
      color: white;
      cursor: pointer;
      display: flex;
      .info {
        display: flex;
        flex-direction: column;
        margin-top: -12px;
      }
      span {
        height: 25px;
        display: block;
      }
      img {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        margin: 10px 0px 10px 10px;
        /*float: right;*/
      }
    }
  }

  .el-main {
    background-color: white;
    color: #333;
    padding: 0;
  }
}
.el-dropdown-menu {
  width: 117px !important;
  margin-top: 0;
}
</style>
<style lang="scss">
#home {
  .el-button--primary.is-plain {
    color: #409eff !important;
    background: #ecf5ff !important;
    border-color: #b3d8ff !important;
  }
  .is-active .active-bar {
    width: 102px !important;
  }
  // .input-search {
  //   input{
  //     border-color: #666666 !important;
  //   }
  //   input:hover{
  //     border-color:  rgba(84, 157, 232, 1) !important;
  //   }
  //   input:focus{
  //     border-color:  rgba(84, 157, 232, 1) !important;
  //   }
  // }
}
</style>
